<template>
  <div>
    <el-descriptions v-for="(item) in list" :key="item.objectId" class="margin-top" :column="3" size="mini" border>
      <el-descriptions-item content-class-name="item1">
        <template slot="label">
          <i class="el-icon-user" />
          订单编号
        </template>
        {{ item.objectId }}
      </el-descriptions-item>
      <el-descriptions-item content-class-name="item2">
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          下单时间
        </template>
        {{ item.createdAt }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          配送时间
        </template>
        {{ item.deliveryTime }}
      </el-descriptions-item>
      <el-descriptions-item content-class-name="item1">
        <template slot="label">
          <i class="el-icon-user" />
          用户名
        </template>
        {{ item.username }}
      </el-descriptions-item>
      <el-descriptions-item content-class-name="item2">
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          手机号
        </template>
        {{ item.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building" />
          配送地址
        </template>
        {{ item.city }} {{ item.region }} {{ item.detail }}
      </el-descriptions-item>
      <el-descriptions-item v-for="(itemx) in item.orderlist" :key="itemx.id" content-class-name="goods">
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          商品
        </template>
        <img :src="itemx.img" style="width: 80px;margin-right: 10px;">
        {{ itemx.name }}
        <el-tag style="margin-left: 20px;" size="small">{{ itemx.list[itemx.idx].spec }} × {{ itemx.num }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item content-class-name="operation">
        <template slot="label">
          <i class="el-icon-tickets" />
          操作
        </template>
        <el-button type="info" size="small">拒绝</el-button>
        <el-button type="primary" size="small" @click="handleConfirm(item)">同意</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import utctobeijing from '@/utils/utctobeijing.js'
import { mapState } from 'vuex'
export default {
  inject: ['reload'],
  data() {
    return {
      list: null
    }
  },
  computed: {
    ...mapState({
      notification: state => state.order.notification
    })
  },
  watch: {
    notification(newval, odlval) {
      console.log(newval, odlval)
      this.reload()
    }
  },
  created() {
    this.$get('/1.1/classes/order?where={"confirm":"0"}&order=-createdAt').then(res => {
      res.data.results.forEach(el => {
        el.createdAt = utctobeijing(el.createdAt)
      })
      this.list = res.data.results
      // console.log(this.list)
    })
  },
  methods: {
    handleConfirm(item) {
      this.$set(item, 'confirm', '1')
      console.log(item)
      this.$put(`/1.1/classes/order/${item.objectId}`, { 'confirm': '1' })
      this.reload()
    }
  }
}
</script>

<style lang="scss">
  .el-collapse-item__header{
    font-size: 30px;
  }
  .operation{
    text-align: end !important;
    padding-right: 3% !important;
  }
  .goods{
    display: flex;
    align-items: center;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    // text-align: end;
    img{
      padding-right: 10px;
    }
  }
  .item1{
    width: 300px;
  }
  .item2{
    width: 300px;
  }
  .is-bordered-label{
    &:first-child{
      width: 100px;
    }
    &:nth-of-type(2){
      width: 100px;
    }
    &:nth-of-type(3){
      width: 100px;
    }
  }
  .el-descriptions{
    margin-top: 10px;
  }
</style>
